<template>
  <div class="container flex-col">
    <div class="w_full flex-col">
      <span class="title">列表</span>
      <div class="flex-row comm_border space-between" style="height: 80px;margin-top: 16px; ">
        <div class="flex-row-center">
          <span class="label_title" style="margin-left: 24px;">时间</span>
          <el-date-picker v-model="data.dtStart"
                          type="date"
                          placeholder="请输入日期"
                          value-format="YYYY-MM-DD"
                          format="YYYY-MM-DD"
                          size="large"
                          style="margin-left: 12px;width: 200px"></el-date-picker>
          <span style="margin-left: 12px">至</span>
          <el-date-picker
              type="date"
              placeholder="请输入日期"
              value-format="YYYY-MM-DD"
              format="YYYY-MM-DD"
              v-model="data.dtEnd"
              size="large"

              style="margin-left: 12px;width: 200px"></el-date-picker>

          <span class="label_title" style="margin-left: 32px">状态</span>
          <el-select style="margin-left: 12px;width: 200px" v-model="data.selectStatus" placeholder="请选择"
                     size="large">
            <el-option
                v-for="item in data.listStatus"
                :key="item.key"
                :label="item.value"
                :value="item.key"
            />
          </el-select>
        </div>
        <div class="flex-row-center">
          <el-button class="search_btn_primary" type="primary" @click="click_search"
                     style="margin-right: 24px;width: 88px;height: 44px">查询
          </el-button>
        </div>
      </div>
      <div class="flex-row-center" style="margin-top: 16px; height:80px;justify-content: space-between">
        <el-button style="width:114px;height: 48px;border-radius: 12px" type="primary" :icon="Plus"
                   @click="click_create">创建试卷
        </el-button>
        <el-input placeholder="请输入" v-model="data.searchName"
                  style="width:412px;height: 48px;border-radius: 12px"
                  :prefix-icon="Search"></el-input>
      </div>
    </div>
    <div class="flex_1">
      <div class="full">
        <div class="flex_1" style="margin: 0">
          <div v-for="item in data.listExamInfo" :key="item"
               style="height: 130px; margin-top: 12px;background-color: white"
               class="comm_border flex-col">
            <div class="flex_1 flex-row-center" style="justify-content: space-between ;margin:auto 24px;">
              <span class="examName">{{ item.title }}</span>
              <div class="flex-row">
                <div v-if="item.examStatus==0" class="flex-row-center " style="margin-left: 7px">
                  <div style="width: 10px ;height: 10px;border-radius: 5px;  background-color: #C5C5C5"></div>
                  <div class="status">未发布</div>
                </div>
                <div v-else-if="item.examStatus==1" class="flex-row-center " style="margin-left: 7px">
                  <div style="width: 10px ;height: 10px;border-radius: 5px;  background-color: #56C08D"></div>
                  <div class="status">已发布</div>
                </div>
                <div v-else class="flex-row-center " style="margin-left: 7px">
                  <div style="width: 10px ;height: 10px;border-radius: 5px;  background-color: green"></div>
                  <div class="status">已完成</div>
                </div>
                <span class="status" style="margin-left: 32px">
                    答案 :1
              </span>
                <span class="status" style="margin-left: 32px">
                   {{ item.createTimeStr }}
              </span>
              </div>
            </div>
            <div class="comm_split" style="margin: auto 16px;"></div>
            <div class="flex_1 flex-row-center" style="justify-content: space-between ;;margin:auto 24px;">
              <div>
                <el-button v-if="item.examStatus==0" class="btn1" style="margin-left: 0"
                           @click="click_edit_exam(item)">
                  <img src="@/assets/edit.png" alt="编辑试卷" class="img_in_btn" style="">
                  <span class="txt_in_btn">编辑试卷</span>
                </el-button>

                <el-button v-if="item.examStatus!=0" class="btn1" style="margin-left: 0"
                           @click="click_go_examUser(item)">
                  <img src="@/assets/detail.png" alt="查看提交" class="img_in_btn" style="">
                  <span class="txt_in_btn">查看提交</span>
                </el-button>


                <el-button class="btn1">
                  <img src="@/assets/analysis.png" alt="试卷分析" class="img_in_btn" style="">
                  <span class="txt_in_btn">试卷分析</span>
                </el-button>

                <el-button class="btn1">
                  <img src="@/assets/download.png" alt="下载" class="img_in_btn" style="">
                  <span class="txt_in_btn">下载</span>
                </el-button>
              </div>

              <div class="flex-row-center" style="">
                <el-button v-if="item.examStatus==0" class="btn1" @click="click_publish(item)">
                  <img src="@/assets/play.png" alt="下载" class="img_in_btn" style="">
                  <span class="txt_in_btn">发布试卷</span>
                </el-button>
                <div class="comm_split" style="width: 1px; height: 24px; margin-left: 24px;"></div>
                <el-button class="btn1">
                  <img src="@/assets/copy.png" alt="下载" class="img_in_btn" style="">
                  <span class="txt_in_btn">复制</span>
                </el-button>
                <el-button class="btn1" @click="click_delete(item)">
                  <img src="@/assets/delete.png" alt="下载" class="img_in_btn" style="">
                  <span class="txt_in_btn">删除</span>
                </el-button>

                <el-button class="btn1">
                  <img src="@/assets/star.png" alt="下载" class="img_in_btn" style="">
                  <span class="txt_in_btn">收藏</span>
                </el-button>

                <el-button class="btn1">
                  <img src="@/assets/save_template.png" alt="下载" class="img_in_btn" style="">
                  <span class="txt_in_btn">另存为模板</span>
                </el-button>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div class="flex-row-center w_full"
           style="flex-direction: row-reverse ;margin-top: 14px;height: 50px;">
        <el-pagination
            v-model:current-page="pager.currentPage"
            v-model:page-size="pager.pageSize"
            :page-sizes="[10,20,30,50]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pager.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, shallowRef} from "vue";
import {Plus, Search} from "@element-plus/icons-vue";
import {ExamType_Test} from "@/constants/Constants_ExamType";
import {ElNotification} from "element-plus";
import {tickAsTimeString} from "@/utils/TimeUtil";
import {ListExamStatusInfo} from "@/constants/Constants_ListExamStatusInfo";
import {api_deleteExam, api_getExamList} from "@/request/apis/examApi";
import {ExamVO} from "@/type/vo/ExamVO";
import {addDialog} from "@/components/gDialog/index";
import router from "@/router";
import {ExamStatusAsString} from "@/utils/EnumHelper";
import msg from "@/components/msg";
import ExamPublish from "@/views/Exam/dialogs/ExamPublish.vue";
import ExamCreate from "@/views/Exam/dialogs/ExamCreate.vue";


const data = reactive({
  dtStart: '',
  dtEnd: '',
  searchName: '',
  selectStatus: -1,
  listStatus: ListExamStatusInfo,
  listExamInfo: Array<ExamVO>(),
  ansCount: 10,
})
const pager = reactive({
  currentPage: 1,
  pageSize: 5,
  total: 10,
})


onMounted(async () => {

  await search_pri();
})

const click_edit_exam = (exam: ExamVO) => {
  router.push({
    path: '/examEditView',
    query: {
      examId: exam.examId
    }
  })
}

const click_go_examUser = (exam: ExamVO) => {
  router.push({
    path: '/examItemUserView',
    query: {
      examId: exam.examId
    }
  })
}

const click_create = () => {
  try {
    addDialog({
      title: "请输入名称",
      component: shallowRef(ExamCreate),
      width: "800px",
      props: {},
      callBack: (dRet: boolean, examId: string) => {
        console.log('dRet', dRet);
        console.log('name', examId);
        if (dRet) {
          //跳转页面
          router.push({
            path: '/examEditView',
            query: {
              examId: examId
            }
          })
          // ElMessage(`创建成功!!${name}`);
          return;
        } else {
          // tableList.data[index as number] = data
        }
        console.log(data, "data")
      }
    })
    // 处理确认操作
  } catch (error) {
    // 处理取消操作
  }

}

const click_publish = (exam: ExamVO) => {
  try {
    addDialog({
      title: "发布试卷",
      component: shallowRef(ExamPublish),
      width: "600px",
      props: {examId: exam.examId},
      callBack: async (dRet: boolean) => {
        if (dRet) {
          await click_search();
        }
      }
    })
    // 处理确认操作
  } catch (error) {
    // 处理取消操作
  }
}
const click_delete = async (exam: ExamVO) => {
  try {
    const rDialog = await msg.yesNo(
        `是否确认删除试卷 ${exam.title}?`,
        '警告'
    );
    if (rDialog) {
      const r = await api_deleteExam(exam.examId);
      if (!r) {
        await msg.info('数据异常');
        return;
      }
      if (r.code != 0) {
        await msg.info(`数据异常!  ${r.code} msg：${r.msg}`);
        return;
      }
      await search_pri();
      ElNotification({
        title: '提示',
        message: '已删除!',
      })
    }
  } catch (error) {
    // 处理取消操作
  }
}

const search_pri = async () => {
  console.log('dtStart', data.dtStart);
  data.listExamInfo.length = 0;
  const limit = pager.pageSize;
  const page = pager.currentPage;
  const examName = data.searchName
  const examType = ExamType_Test;
  // }
  let status = 0;
  if (data.selectStatus > 0) {
    status = data.selectStatus;
  }
  let startDate = data.dtStart ? data.dtStart : '';
  let dtEnd = data.dtStart ? data.dtEnd : '';

  const r = await api_getExamList(
      startDate,
      dtEnd,
      examName,
      examType,
      status,
      page,
      limit);
  if (!r) {
    await msg.info('数据异常');
    return;
  }
  if (r.code != 0) {
    await msg.info(`数据异常!  ${r.code} msg：${r.msg}`);
    return;
  }
  if (r.data.records) {
    for (let i = 0; i < r.data.records.length; i++) {
      r.data.records[i].index = i + 1;
      r.data.records[i].statusStr = ExamStatusAsString(r.data.records[i].examStatus);
      r.data.records[i].createTimeStr = tickAsTimeString(r.data.records[i].createTime)
    }
  }

  data.listExamInfo = r.data.records;
  pager.total = r.data.total;
}

const click_search = async () => {
  await search_pri();
};

const handleSizeChange = async (val: number) => {
  await search_pri();
}
const handleCurrentChange = async (val: number) => {
  await search_pri();
}

</script>

<style scoped>
.grid-container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

.row {
  display: flex;
  align-items: center;
  justify-content: center;
}

.row-1,
.row-3 {
}

.row-2 {
  overflow: auto;
}

.scrollable-content {

  line-height: 1.5em;
}


.title {
  font-size: 24px;
  font-weight: 600;
  color: #0A1629;
  line-height: 28px;
}

.label_title {
  font-size: 16px;
  font-weight: 400;
  color: #595959;
  line-height: 24px;
}

.date-picker {
  width: 200px;
  height: 48px;
  color: black;
  background: #FFFFFF;
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  border: 1px solid #DCDCDC;
}

.el-scrollbar__view {
  height: calc(100% - 100px); /* 根据实际情况调整高度 */
}

.infinite-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background: black;
  margin: 10px;
  color: var(--el-color-primary);
  overflow: hidden;
}

.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}

.examName {
  font-size: 20px;
  font-weight: 400;
  color: #0A1629;
  line-height: 24px;
}

.status {
  font-size: 16px;
  font-weight: 400;
  color: #0A1629;
  line-height: 24px;
  margin-left: 7px;
}

.btn1 {
  border: none;
  margin-left: 24px;
  width: auto;

  padding: 0;
}


</style>
